/// <reference path="jquery.min.js" />

var vue = new Vue({
    el: '#bomb',
    data: {
        //雷区中的元素
        items: [],
        //当前雷数
        current: 0,
        size: 10,
        bombNumber: 10,
        unOpen: 0,
        //标记延时
        duration: 200,
        time: 0,
        target: null,
        downTime: null,
        upTime: null,
        timeOutHandle: null,
        roundSweeping: false,
        startTime: 0,
        endTime: 0,
        intervalHandle: null,
        isWin:false
    },
    methods: {
        //生成雷区
        init: function () {
            //清空雷区数据
            this.items = [];
            this.unOpen = this.size * this.size;
            this.isWin=false;
            //生成空雷区
            for (var i = 0; i < this.size; i++) {
                var tempArray = new Array();
                for (var j = 0; j < this.size; j++) {
                    var newItem = {
                        row: i,
                        col: j,
                        isBomb: false,
                        nearBomb: 0,
                        isFlag: false,
                        isOpen: false
                    }
                    tempArray.push(newItem);
                }
                this.items.push(tempArray);
            }

            // 埋雷 
            var _count = 0;
            while (_count < this.bombNumber) {
                var row = Math.floor(this.size * Math.random());
                var col = Math.floor(this.size * Math.random());
                if (this.items[row][col].isBomb == false) {
                    //埋雷
                    this.items[row][col].isBomb = true;
                    _count++;
                }
            }
            //计算旁边有几个雷
            var $this = this;
            for (var row = 0; row < this.size; row++) {
                for (var col = 0; col < this.size; col++) {
                    this.eightErgodic(row, col, function (i, j) {
                        if ($this.items[i][j].isBomb === true) {
                            $this.items[row][col].nearBomb++;
                        }
                    })
                }
            }
        },
        //点开一个区域,并且判断是否是雷 不是雷的话就打开一片区域
        sweep: function (item) {
            //保证第一次点击会打开一片雷区,即必须为0
            if (this.unOpen == this.size * this.size) {
                while (this.items[item.row][item.col].nearBomb != 0) {
                    this.init();
                }
                this.initTimeCounter();
            }
            if (item.isFlag) {
                //如果是被标记了的话,则直接返回,如果体检有改进,可以改为取消标记
                return;
            }
            if (item.isOpen) {
                if (this.roundSweeping)//四周八个点击期间,不对点开的方块进行模拟点击
                    return;
                else {
                    this.roundSweeping = true;
                    this.roundSweep(item);
                }
            }
            if (item.isBomb === true) {
                alert('you Lose');
            } else {
                this.bombErgodic(item.row, item.col);
            }

            this.countWin();
        },
        //标记/取消标记旗帜
        flag: function (item) {
            //如果已经开了 则不标记
            if (item.isOpen)
                return;

            if (item.isFlag)
                item.isFlag = false;
            else
                item.isFlag = true;
        },
        //点击一个已打开的方块,对其四周八个方块进行模拟点击,如果有雷则失败
        roundSweep: function (item) {
            //如果周围没有雷的话,不响应事件
            if (item.nearBomb === 0)
                return;

            var $this = this;
            var flagNumber = 0;
            //计算周围被标记的区域数目
            this.eightErgodic(item.row, item.col, function (row, col) {
                if ($this.items[row][col].isFlag)
                    flagNumber++;
            })
            //如果被标记的数目不等于周围的雷数 则不执行八个方块的模拟点击
            if (flagNumber == item.nearBomb) {
                this.eightErgodic(item.row, item.col, function (row, col) {
                    $this.sweep($this.items[row][col]);
                })
            }
        },
        //进行排雷遍历
        bombErgodic: function (row, col) {
            if (this.items[row][col].isFlag)//被标记了 则返回
                return;
            if (this.items[row][col].isBomb)//是雷的话返回
                return;
            if (this.items[row][col].isOpen)//已经打开的话 则返回
                return;
            var $this = this;
            //将区域打开
            this.items[row][col].isOpen = true;//打开该方块
            this.unOpen--;
            if (this.items[row][col].nearBomb != 0)//周围雷数不为0的话 则返回
                return;
            this.eightErgodic(row, col, function (i, j) {
                $this.bombErgodic(i, j);
            })
        },
        //对周围八个方块进行遍历
        eightErgodic: function (row, col, deal) {
            if (deal != null) {
                for (var i = row - 1; i <= row + 1; i++) {
                    for (var j = col - 1; j <= col + 1; j++) {
                        if (!(i < 0 || j < 0 || i >= this.size || j >= this.size || (i == row && j == col))) {
                            deal(i, j);
                        }
                    }
                }
            } else {
                console.log('The function deal is undefined,error');
            }
        },
        //鼠标点击的事件
        mouseDown: function (item, event) {
            this.roundSweeping = false;
            this.target = item;
            this.downTime = event.timeStamp;
            var $this = this;
            this.timeOutHandle = setTimeout(function () {
                $this.flag(item);
                $this.target = null;
            }, this.duration);
        },
        //鼠标弹起后进行动作类型判断
        mouseUp: function (item, event) {
            clearTimeout(this.timeOutHandle);
            if (item == this.target)
                this.upTime = event.timeStamp;
            else {
                this.upTime = null;
                return;
            }

            var actType = { click: 'click', press: 'press' };//操作类型

            if (this.upTime - this.downTime > this.duration) {
                this.flag(item);
            } else {
                this.sweep(item);
            }
        },
        //开始计时器功能
        initTimeCounter: function () {
            var $this = this;
            this.startTime = new Date().getTime();
            this.endTime = new Date().getTime();
            //如果已经有一个计时器的话,则先清除
            if(this.intervalHandle!==null)
                clearInterval(this.intervalHandle);
            this.intervalHandle = setInterval(function () {
                $this.endTime = new Date().getTime();
            }, 1000)
        },
        countWin: function () {
            //赢了
            if (this.unOpen == this.bombNumber && this.isWin===false) {
                this.isWin=true;
                clearInterval(this.intervalHandle);
                this.endTime = new Date().getTime();
                var useTime = ((this.endTime - this.startTime) / 1000).toFixed(3);
                alert('你赢了! 所用时间: ' + useTime);
                this.intervalHandle=null;
            }
        }
    },
    computed: {
        useTime: function () {
            return parseInt((this.endTime - this.startTime) / 1000);
        }
    },
    components:{
        //拖动条组件
        'dragbar':{
            data:function(){
              return  {
                  left:0,
                  maxLength:100,
                  isDrag:false
                }
            },
            template:'#dragBar',
            methods:{
                dragStart:function(){
                    this.isDrag=true;
                },
                dragEnd:function(){
                    this.isDrag=false;
                },
                drag:function(e){
                    if(this.isDrag===true)
                        this.left=e.offsetX;
                }
            }
        }
    }
})

